import React from 'react'
import PropTypes from 'prop-types'
//使用校验就要引入

class TodoItem extends React.Component{
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }
//onClick={this.handleClick.bind(this)}这种写法后续复杂组件会有代码性能上的损耗

componentWillReceiveProps(newProps) {
    //在组件接收到一个新的 prop (更新后)时被调用。
    console.log('TodoItem**componentWillReceiveProps更新**')
}

componentWillUnmount() {
    //在组件从 DOM 中移除之前立刻被调用。
  console.log('TodoItem**componentWillUnmount**移除')
}

//你的组件需要被更新吗 返回true后componentWillUpdate才会执行，否不执行
shouldComponentUpdate(newProps, newState) {
    if(newProps.content !== this.props.content){
        return true
    }else{
        return false;
    }
       
}

   render(){
       console.log('TodoItem render 表')
       const {content,test} = this.props;//结构赋值要加花括号
       return (     
            <li  onClick={this.handleClick}>
               {test} ：{content}
            </li>
       )
    }
   handleClick(){
        //    this.props.DeleteItem(this.props.index)
        const { DeleteItem,index} =  this.props;//结构赋值
        DeleteItem(index)
   }

}

//对TodoItem的属性做校验(注意大小写)要引入 content要是string类型
//记住input输入框里的自动就是string   校验规则具体可看官网
TodoItem.propTypes = {
    //如果该字符没传，就不会进行string校验，此时不会报错
    test:PropTypes.string.isRequired,//test为测试，可在文章中删除
    content:PropTypes.oneOfType([PropTypes.number,PropTypes.string]),
    DeleteItem:PropTypes.func,
    index:PropTypes.number
}
//默认值设定default：默认Props：属性
TodoItem.defaultProps = {
    test:"测试默认值"
} 



export default TodoItem;
